<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '报价',
  },
}
</route>

<template>
  <view>
    <view class="search-warp">
      <wd-datetime-picker
        type="date"
        label="年月日"
        v-model="currentDate"
        :displayFormat="displayFormat"
        use-default-slot
        @confirm="dateConfirm"
      >
        <view class="time-picker">
          <text>{{ date }}</text>
          <wd-icon name="caret-down-small" color="#999999" size="32px"></wd-icon>
        </view>
      </wd-datetime-picker>

      <view class="search-input-warp">
        <wd-input
          class="search-input"
          custom-class="custom-class-content"
          type="text"
          v-model="value"
          placeholder="请输入搜索内容"
          @confirm="search"
        />
        <image class="search-icon" src="../../static/images/search.png" mode=""></image>
      </view>
    </view>
    <view class="content-warp">
      <view class="content-top">
        <image
          class="content-image"
          src="../../static/images/advertise.png"
          mode=""
          @click="toAdv"
        ></image>
      </view>
      <view class="content">
        <view class="content-left">
          <view
            @click="tabClick(item)"
            v-for="(item, index) in tabList"
            :key="item.product_type_id"
            :class="item.product_type_id == active ? 'active' : ''"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="content-right">
          <view
            class="content-block"
            @click="handelGoDetail(item)"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <view class="content-block-top">
              <view>{{ item.name }}</view>
              <view class="content-block-top-right">
                <text>¥ {{ item.amount }}/{{ item.unit }}</text>
                <image
                  style="width: 9px; height: 15px; margin-left: 4px"
                  :style="{ transform: item.state == 2 && 'rotate(180deg)' }"
                  src="../../static/images/arrow-up.png"
                  mode=""
                ></image>
              </view>
            </view>
            <view class="content-block-time">
              <view>上次报价：¥ {{ item.amount_last }}/{{ item.unit }}</view>
              <view>{{ item.create_time }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { quoteCategory, quoteList } from '@/service/quote'

const value = ref()
const search = () => {

}
const active = ref(0)
const tabList = ref<IQuoteCategory[]>([])
const getCategory = async () => {
  const res: IResData<IQuoteCategory[]> = await quoteCategory()
  if (res.code === 1) {
    tabList.value = res.data
    active.value = tabList.value[0]?.product_type_id
  }
}
const tabClick = async (item: IQuoteCategory) => {
  active.value = item.product_type_id
  getList()
}
const dataList = ref<IQuote[]>([])
function getNowDateString() {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  // 月，日补零
  const monthStr = month < 10 ? `0${month}` : `${month}`
  const dayStr = day < 10 ? `0${day}` : `${day}`
  return [`${year}-${monthStr}-${dayStr}`, `${year}年${monthStr}-${dayStr}`]
}

const date = ref<string>(getNowDateString()[1])
const dateP = ref<string>(getNowDateString()[0])
const currentDate = ref(new Date().getTime())
const displayFormat = (items: any[]) => {
  date.value = `${items[0].label}年${items[1].label}-${items[2].label}`
  dateP.value = `${items[0].label}-${items[1].label}-${items[2].label}`
}
const dateConfirm = ({ value }) => {
  console.log(value, 'value')
  getList()
}
const getList = async () => {
  const res: IResData<IQuote[]> = await quoteList(dateP.value, active.value)
  if (res.code === 1) {
    dataList.value = res.data
  }
}
function handelGoDetail(item: IQuote) {
  uni.navigateTo({
    url: `./quoteDetail/index?id=${item.product_id}&name=${item.name}`,
  })
}
// 广告
const toAdv = () => {
  uni.navigateTo({
    url: '/pages/advertisement/index',
  })
}

onLoad(async () => {
  await getCategory()
  await getList()
})
</script>

<style scoped lang="scss">
.search-warp {
  display: flex;
  align-items: center;
  margin: 0 15px;
  padding-bottom: 20px;

  .time-picker {
    display: flex;
    align-items: center;
    width: 140px;
  }

  .search-input-warp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    opacity: 1;
    background: #f7f7f7;
    border-radius: 8px;
    padding: 0px 10px;

    .search-input {
      flex: 1;
      background: #f7f7f7;
    }

    .search-icon {
      width: 14px;
      height: 14px;
    }
  }

  .custom-class-content {
    background: #f7f7f7;
    border: none !important;
  }

  .custom-class-content::after {
    height: 0 !important;
  }
}

.content-warp {
  width: 100%;
  background: #f7f7f7;
  padding-top: 1px;
  .content-top {
    border-radius: 141px;
    opacity: 1;
    // background: linear-gradient(90deg, #1CC165 0%, #6BB748 100%);
    width: 352px;
    height: 72px;
    margin: 0 auto;
    margin-top: 15px;

    .content-image {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    display: flex;
    margin-top: 20px;
    height: calc(100vh - 156px);
    .content-left {
      width: 96px;

      view {
        width: 96px;
        height: 52px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .active {
        background-color: #fff;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        color: #56b756;
      }
    }

    .content-right {
      flex: 1;
      overflow-y: scroll;
      max-height: 90%;
      .content-block {
        // height: 73px;
        max-width: 254px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        border-radius: 10px;
        opacity: 1;
        padding: 15px 10px;
        background: #ffffff;

        .content-block-top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .content-block-top-right {
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 500;
            line-height: 26px;
            text-align: center;
            display: flex;
            align-items: center;
            letter-spacing: 0px;
            color: #333333;

            text {
              margin-left: 6px;
            }
          }
        }

        .content-block-time {
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: Source Han Sans;
          font-size: 10px;
          font-weight: 350;
          line-height: 16.41px;
          letter-spacing: 0px;
          color: #999999;
        }
      }
    }
  }
}
:deep(.wd-input.custom-class-content) {
  background: #f7f7f7 !important;
}
</style>
